<template>
    <div class="con">
        <div class="wrapper">
            <h3 class="title">案件提交时间</h3>
            <el-date-picker v-model="caseDateRange" type="daterange" value-format="yyyy-MM-dd" unlink-panels
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :picker-options="pickerOptions"
                @change="onDateChange">
            </el-date-picker>
        </div>

        <div class="chart-wrapper">
            <h3 class="title">按照模版统计</h3>
            <pie-chart :chart-data="pieChartData" />
        </div>

        <div class="chart-wrapper">
            <h3 class="title">模版生成趋势统计</h3>
            <line-chart :chart-data="lineChartData" />
        </div>
    </div>
</template>

<script>
import PieChart from './pieChart'
import LineChart from './lineChart'
import dayjs from 'dayjs'

export default {
    data() {
        return {
            caseDateRange: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            pieChartData: {
                legendData: ['模版1', '模版2'],
                seriesData: [
                    {
                        name: '模版统计',
                        type: 'pie',
                        // roseType: 'radius',
                        // radius: [15, 95],
                        // center: ['50%', '38%'],
                        data: [{ value: 100, name: '模版1' }, { value: 150, name: '模版2' }],
                        animationEasing: 'cubicInOut',
                        animationDuration: 2600
                    }
                ]
            },
            lineChartData: {
                legendData: ['模版1', '模版2'],
                xAxisData: ['202303', '202304', '202305', '202306', '202307', '202308', '202309', '202310', '202311', '202312', '202401', '202402'],
                seriesData: [{
                    name: '模版1',
                    itemStyle: {
                        color: '#FF005A',
                        lineStyle: {
                            color: '#FF005A',
                            width: 2
                        }
                    },
                    smooth: true,
                    type: 'line',
                    data: [100, 120, 161, 134, 105, 160, 165, 91, 154, 162, 140, 145],
                    animationDuration: 2800,
                    animationEasing: 'cubicInOut'
                },
                {
                    name: '模版2',
                    smooth: true,
                    type: 'line',
                    itemStyle: {
                        color: '#3888fa',
                        lineStyle: {
                            color: '#3888fa',
                            width: 2
                        },
                        areaStyle: {
                            color: '#f3f8ff'
                        }
                    },
                    data: [120, 82, 91, 154, 162, 140, 145, 100, 120, 161, 134, 105],
                    animationDuration: 2800,
                    animationEasing: 'quadraticOut'
                }]
            }
        }
    },
    components: {
        PieChart,
        LineChart
    },
    mounted() {
        const startDate = dayjs().subtract(1, 'year').format('YYYY-MM-DD')
        const endDate = dayjs().format('YYYY-MM-DD')
        this.caseDateRange = [startDate, endDate]
    },
    methods: {
        onDateChange(e) {
            console.log(e)
        }
    }
}
</script>
  
<style lang="scss" scoped>
.wrapper {
    display: flex;
    align-items: center;

    .title {
        margin-right: 20px;
    }
}

.chart-wrapper {
    .title {
        margin-bottom: 20px;
    }
}
</style>
  